<template>
    <div class="allmusic">
      <div class="allmusic-top" >
        <div>
          <svg class="icon" @click="$router.go(-1)">
            <use xlink:href="#icon-zuo1"></use>
          </svg>
        </div>
        <h1>全部歌单</h1>
        <div class="title" @click="is=!is">选择分类</div>
      </div>
      <div class="music" v-show="!is" ref="music">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :immediate-check="false"
          offset=1
        >
            <router-link :to="{path:'/listView',query:{id:item.id}}" v-for="(item,i) in musicList" :key="i" class="list">
                <img :src="item.coverImgUrl" alt="">
                <div class="details">
                  {{item.name}}
                  <div class="music-type">类型:
                    <span v-for="(time,k) in item.tags" :key="k">{{time}}</span>
                  </div>
                </div>
            </router-link>
        </van-list>
      </div>
      <div class="sort" v-show="is">
          <div v-for="(item,i) in sortList.categories" :key="i" class="language">
            <h3>{{item}}</h3>
              <div v-for="(time,k) in sortList.sub" :key="k" class="sort-type">
                <div v-if="time.category==i" class="typeList" @click="selectType(time.name)">
                  {{time.name}}
                </div>
              </div>
          </div>
      </div>
      <div class="gotop" @click="gotop">
          <svg class="icon" >
            <use xlink:href="#icon-huidaodingbu"></use>
          </svg>
      </div>
    </div>
</template>
<script>
import { setTopPlaylist, setTags } from '@/api/index.js'

export default {
  data () {
    return {
      musicList: [],
      sortList: [],
      is: false,
      cat: '',
      before: '0',
      loading: false,
      finished: false
    }
  },
  async mounted () {
    const topList = await setTopPlaylist(10, this.cat, this.before)
    const tags = await setTags()
    this.sortList = tags.data
    this.musicList = topList.data.playlists
    console.log(this.musicList)
    console.log(this.musicList.slice(-1)[0])
    console.log(topList)
    console.log(tags)
  },
  methods: {
    async selectType (time) {
      this.cat = time
      const topList = await setTopPlaylist(10, this.cat, this.before)
      this.musicList = topList.data.playlists
      this.is = !this.is
    },
    async onLoad () {
      this.before = this.musicList[this.musicList.length - 1].updateTime
      if (this.before) {
        const topLists = await setTopPlaylist(10, this.cat, this.before)
        console.log(topLists)
        this.musicList = this.musicList.concat(topLists.data.playlists)
        this.loading = false
      }
    },
    gotop () {
      this.$refs.music.scrollTop = 0
    }
  }

}
</script>
<style lang="less" scoped>
.allmusic{
     width: 7.5rem;
    .allmusic-top{
        width: 7.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding-bottom: 0.1rem;
        border-bottom:2px solid red;
        .icon{
            width: 0.6rem;
            height: 0.6rem;
        }
        .title{
          border: 1px solid #ccc;
          background-color: #ccc;
          font-weight: normal;
          border-radius: 8%;
          padding: 0.1rem;
          color:rgb(14, 30, 46);
        }
    }
  .sort{
    width: 7.1rem;
    .language{
      margin:0.1rem  0.2rem ;
      .sort-type{
        display:inline-block;
        .typeList{
          margin: 0.1rem 0.2rem;
        }
      }
    }
  }
  .music{
    width: 7.1rem;
    margin: 0 auto;
    height: 11.2rem;
    overflow:scroll;
    .list{
      display:flex;
      justify-content: space-between;
      margin: 0.2rem 0;
      img{
        width: 2.5rem;
        height: 2.5rem;
      }
      .details{
        width: 4rem;
        margin: 0.2rem 0;
        .music-type{
          margin: 0.2rem 0;
          color:orange;
          span{
            color: red;
            margin: 0 0.1rem;
          }
        }
      }
    }
  }
  .gotop{
    position:absolute;
    right: 0.5rem;
    bottom: 2rem;
    z-index: 10;
    .icon{
      width: 1rem;
      height: 1rem;
    }
  }

}
</style>
